<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #app{
            padding: 10px;
            max-width: 700px;
            text-align: center;
        }
        .add{
            border: 1px solid #000;
            max-width: 700px;
            margin-bottom: 20px;
            padding: 20px;
            text-align: center;
        }
        .nr{
            width:650px;
            padding:10px;
            border: 5px solid black;
            /* border-collapse:collapse; */
        }
        .nr td{
            border: 20px solid #fff;
            text-align: center;
        }
        .nr th{
            color: black;
            text-align: center;
        }
    </style>
</body>
<!-- 上标题 -->
<div id="app">
    <div class="add">
        编号:
        <input type="text" v-model="code">
        产品名称:
        <input type="text" v-model="cpName">
        产品图片:
        <input type="text" v-model="imgUrl">
        价格:
        <input type="text" v-model="price">
        <button @click="add">添加</button>
    </div>
    <br>
    <!-- 下内容区 -->
    <div class="nr">
        <table>
            <tr>
                <th>
                    全选
                    <input type="checkbox" @change="allcheckchange" :checked="zchecked">
                </th>
                <th>图片</th>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <!-- 内容展示区 -->
            <tr v-for="(item,index) in cpNames"  :key="item.id">
                <td>
                    <!-- 内容区勾选框 -->
                    <input type="checkbox" v-model="checks" :value="item" >
                </td>
                <td>
                    <img :src="item.imgUrl" alt="这个一个图片" width="50" height="50">
                </td>
                <td>
                    {{item.code}}
                </td>
                <td>
                    {{item.cpName}}
                </td>
                <td>
                    {{item.price}}
                </td>
                <td>
                    <button @click="jianjian(item)">-</button>
                    {{item.proNum}}
                    <button @click="jiajia(item)">+</button>
                </td>
                <td>
                    <input type="button" value="删除" @click="del(index)" >
                </td>
            </tr>
        </table>
        <!-- 合计 -->
        <div  class="add" style="text-align:center">
            <span>
               <b style="color: red;font-size: 20px;">总价：{{total}}￥</b> 
            </span>
        </div>
        <!-- <div >没有更多内容了</div> -->
    </div>
</div>
</html>
<script>

    let vm = new Vue({
        el:'#app',
        data:{
            // 组件
            zchecked:false,  // 选择
            imgUrl:"", // 图片引入地址
            cpName:"", // 产品名称
            price:"", //产品价格
            code:"", //code编码
            checks:[], //接受选择
            cpNames:[{
                id:1,
                code:1,
                imgUrl:"https://img1.baidu.com/it/u=534166764,2767385577&fm=253&fmt=auto&app=138&f=JPEG?w=623&h=434",
                cpName:"苹果",
                price:18,
                proNum:1,
            },
            {
                id:2,
                code:2,
                imgUrl:"https://img2.baidu.com/it/u=2836461459,1555994023&fm=253&fmt=auto&app=138&f=PNG?w=500&h=341",
                cpName:"梨子",
                price:18,
                proNum:1,
            },
            {
                id:3,
                code:3,
                imgUrl:"https://img1.baidu.com/it/u=2318780289,2958578679&fm=253&fmt=auto&app=120&f=JPEG?w=710&h=443",
                cpName:"西瓜",
                price:18,
                proNum:1,

            }
        ]
        },
        watch:{
            // 监听选项
            checks(newVal){  // 勾选框选择 判定 当checks里内容与cpNames数组内容相等 全选or不全选
                if(newVal.length=== this.cpNames.length){
                    this.zchecked = true;
                }else{
                    this.zchecked = false;
                }
            }
        },

        computed:{  // 计算属性  求和
            total(){
                return (this.checks.reduce(function(total,item){
                    return total += item.price * item.proNum
                },0)).toFixed(2)
            }
        },
        methods:{
            allcheckchange(e){  // 判定是否全选
                console.log(e.target.checked)  
               if(e.target.checked){
                this.checks = this.cpNames  // 全选
               }else{
                this.checks = []  // 不选
               }
            },
            add(){
                //
                if( !this.code || !this.cpName || !this.price ){  // 判定是否有内容未选 有一个未选则跳警告
                        alert('未填写产品名称、价格与编号');
                        return
                    }
                 // 声明一个obj 接收自定义增加产品信息内容
                let obj = {
                    id:Math.random().toString(32).substr(2),//转数组
                    code: this.code,
                    //占用图
                    imgUrl:this.imgUrl?this.imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fcc30c03af8ae10f361c98be3c0bb5fda5634687f1617-RDMX48_fw236&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674790501&t=436212088bd8959c2819e0ce409a81a7",
                    cpName: this.cpName,
                    price: this.price,
                    proNum:1
                }

                this.cpNames.push(obj)
            },
            // 删除 增加 减少按键事件
            del(index){ //删除按键传index 索引 / 个数 删除
                this.cpNames.splice(index,1)
            },
            jiajia(item){
                item.proNum++
            },
            jianjian(item,index){
                item.proNum--;
                if(item.proNum===0){
                    this.cpNames.splice(index,1) // 删除为0数组
                }
            }

        }
    })
</script>